<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:cc="http://xmlns.jcp.org/jsf/composite"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <!-- INTERFACE -->
    <cc:interface>
        <cc:attribute name="dialogChooserID" required="true" />
        <cc:attribute name="dialogChooserTitle" required="true" />
        <cc:attribute name="dialogChooserItemTitle" required="true" />
        <cc:attribute name="rerendersIDs" required="true" />
        <cc:attribute name="resultListener" required="true" />
        <cc:attribute name="filterFieldName" required="true" />
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>

        <rich:popupPanel id="#{cc.attrs.dialogChooserID}" 
                         header="#{cc.attrs.dialogChooserTitle}"
                         autosized="true" moveable="false"
                         domElementAttachment="form" 
                         onbeforeshow="setResultListener_#{cc.attrs.dialogChooserID}();" >

            <a4j:outputPanel id="#{cc.attrs.dialogChooserID}-dialogChooserPanel" >

                <a4j:outputPanel rendered="#{not empty cc.attrs.resultListener.filterMap}" >

                    <h:outputLabel value="Filter: " for="#{cc.attrs.dialogChooserID}-filterValueInputField" />
                    <h:inputText id="#{cc.attrs.dialogChooserID}-filterValueInputField" 
                                 value="#{cc.attrs.resultListener.filterMap[cc.attrs.filterFieldName]}" 
                                 autocomplete="off" >
                        <a4j:ajax event="keyup" 
                                  oncomplete="#{rich:component(cc.attrs.dialogChooserID)}.hide();
                                  #{rich:component(cc.attrs.dialogChooserID)}.show();"
                                  render="#{cc.attrs.dialogChooserID}-dialogChooserPanel"/>
                    </h:inputText>

                </a4j:outputPanel>

                <a4j:outputPanel id="#{cc.attrs.dialogChooserID}-chooserPanel" layout="block" style="margin: 5px;">

                    <rich:dataGrid id="#{cc.attrs.dialogChooserID}-dialogChooserDataGrid" 
                                   value="#{cc.attrs.resultListener.dataModel}"
                                   var="record" style="width: 100%;"
                                   columns="3" elements="9" >

                        <rich:panel header="#{cc.attrs.dialogChooserItemTitle}" style="overflow: hidden;"
                                    styleClass="dialogChooserItem #{dialogChooserManagedBean.isSelectedItemEqual(record) ? 'dialogChooserSelectedItem' : ''}" >

                            <a4j:ajax event="click" listener="#{dialogChooserManagedBean.processSelectClickEvent(record)}" render="#{cc.attrs.dialogChooserID}-buttons #{cc.attrs.dialogChooserID}-dialogChooserPanel" />

                            <cc:insertChildren />
                        </rich:panel>

                        <f:facet name="footer" >
                            <rich:dataScroller for="#{cc.attrs.dialogChooserID}-dialogChooserDataGrid"
                                               page="#{dialogChooserManagedBean.currentPage}" 
                                               oncomplete="#{rich:component(cc.attrs.dialogChooserID)}.hide();
                                               #{rich:component(cc.attrs.dialogChooserID)}.show();"/>
                        </f:facet>
                    </rich:dataGrid>
                </a4j:outputPanel>

                <a4j:outputPanel id="#{cc.attrs.dialogChooserID}-buttons" layout="block" style="float: right;">

                    <a4j:commandButton value="#{bundle.chooseButton}" 
                                       action="#{dialogChooserManagedBean.storeSelection()}" 
                                       render="#{cc.attrs.rerendersIDs} #{cc.attrs.dialogChooserID}-dialogChooserPanel"
                                       execute="@this" 
                                       rendered="#{not empty dialogChooserManagedBean.selectedItem}"
                                       oncomplete="#{rich:component(cc.attrs.dialogChooserID)}.hide();
                                       #{rich:element(cc.attrs.dialogChooserID.concat('-filterValueInputField'))}.value='';
                                       return false;" />

                    <a4j:commandButton value="#{bundle.cancelButton}"
                                       action="#{dialogChooserManagedBean.cancelSelection()}"
                                       immediate="true"
                                       render="#{cc.attrs.dialogChooserID}-dialogChooserPanel"
                                       oncomplete="#{rich:component(cc.attrs.dialogChooserID)}.hide();
                                       #{rich:element(cc.attrs.dialogChooserID.concat('-filterValueInputField'))}.value='';
                                       return false;" />

                </a4j:outputPanel>

            </a4j:outputPanel>

            <a4j:jsFunction name="setResultListener_#{cc.attrs.dialogChooserID}"
                            action="#{dialogChooserManagedBean.setResultListener(cc.attrs.resultListener)}">
            </a4j:jsFunction>

        </rich:popupPanel>

    </cc:implementation>
</ui:composition>